import React,{useEffect} from 'react'
import './index.less'
import { Layout , Menu , Button} from 'antd-v5';
import tit from '../image/1.png'
import { Link, useLocation } from 'react-router-dom';
import { FireFilled,HomeFilled,DatabaseFilled,FundFilled,SignalFilled,SettingFilled,ToolFilled,RocketFilled} from '@ant-design/icons';



const { Header, Sider, Content } = Layout;

export default function Index(props) {
  const menuItems = [
    {
      key: 'shouye',
      title: '首页',
      path: '/app/shouye',
      icon : <HomeFilled />,
    },
    {
      key: 'manage',
      title: '管理',
      path: '/app/manage',
      icon : <FundFilled />,
      children : [
         {
           key : 'nrmanage',
           title : '内容管理',
           path : '/app/manage/nrmanage',
         },
         {
          key : 'plmanage',
          title : '评论管理',
          path : '/app/manage/plmanage',
        },
        {
          key : 'zlmanage',
          title : '专栏管理',
          path : '/app/manage/zlmanage',
        }
      ]
    },
    {
      key: 'data',
      title: '数据',
      path : '/app/data',
      icon : <SignalFilled />,
    },
    {
      key: 'activities',
      title: '创作活动',
      path : '/app/activities',
      icon : <FireFilled />,
    },
    {
      key: 'equity',
      title: '创作权益',
      path : '/app/equity',
      icon : <RocketFilled />,
    },
    {
      key: 'tool',
      title: '工具',
      path : '/app/tool',
      icon : <ToolFilled />,
    },
    {
      key : 'setup',
      title : '设置',
      path : '/app/setup',
      icon : <SettingFilled />,
  },
  ];

  const location = useLocation();
  // 高阶组件判断是否存在子菜单，如果存在使用SubMenu组件包裹，否则使用Menu.Iteml来渲染
  function renderMenuItems(menuItems) {
    return menuItems.map((item) => {
      if (item.children) {
        return (
          <Menu.SubMenu icon={item.icon} className='menusideitem' key={item.key} title={item.title}>
            {renderMenuItems(item.children)}
          </Menu.SubMenu>
        );
      } else {
        return (
          <Menu.Item icon={item.icon} className='menusideitem' key={item.key}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        );
      }
    });
  }
  // 解决内存泄露
  useEffect(() => {
  
    return () => {

    };
  }, []);
  return (
    <div className='App'>
        <Header className='head'>
            <img className='image' src={tit} alt="" />
            <h3>创作中心</h3>
        </Header>
        <Layout className='body'>
            <Sider className='sider'> 
                <Button onClick={()=>{props.history.push('/add')}} className='fabu' type="primary" danger>
                  发布
                </Button>
                <Menu className='sidemenu'   selectedKeys={[location.pathname]}>
                  {renderMenuItems(menuItems)}
                </Menu>
            </Sider>
          <Content>{props.children}</Content>
        </Layout>
    </div>
  )
}
